<template>
  <div class="topic_outer" id="topic">
    <div class="topic_left">
      <!-- 通过上级传递来的参数来决定显示什么具体信息内容 -->
      <main v-if="chooseUser == 0">
        <div class="topic_left_list first">未 审 核 用 户</div>
      </main>
      <main v-else-if="chooseUser == -1">
        <div class="topic_left_list first">已 拒 绝 用 户</div>
      </main>
      <main v-else>
        <div class="topic_left_list first">已 通 过 用 户</div>
      </main>
      <div v-for="t in userList" :key="t._id">
        <!-- 在这里遍历获得的数据信息 -->
        <div
          v-if="chooseUser == t.status"
          class="inner size_small"
          @click="clickWho(t)"
        >
          {{ t.username }}
        </div>
      </div>
    </div>

    <div class="topic_right">
      <!-- 刚进入页面会出现提示信息而不出现具体内容 -->
      <h1 v-if="!isShowUser">单击左侧用户信息以显示对应详细信息</h1>
      <div class="outer_out" v-if="isShowUser">
        <div class="outer">
          <div class="info_title">用户名:</div>
          <div class="info">{{ fornowdata.username }}</div>
        </div>
        <div class="outer">
          <div class="info_title">电话号码:</div>
          <div class="info">{{ fornowdata.phone }}</div>
        </div>
        <div class="outer">
          <div class="info_title">头像:</div>
          <div class="info"><img :src="fornowdata.avatar" /></div>
        </div>
        <!-- isShowUser改变后显示具体操作内容 同时也根据选择的chooseUser来决定显示的内容 -->
        <main v-if="chooseUser == 0">
          <el-button class="btn" type="info" @click="pass">通 过</el-button>
          <el-button class="btn" type="danger" @click="refuse">拒 绝</el-button>
        </main>
        <main v-else-if="chooseUser == -1">
          <el-button class="btn" type="info" @click="pass">通 过</el-button>
        </main>
        <main v-else>
          <el-button class="btn" type="danger" @click="refuse">拒 绝</el-button>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Video",
  data() {
    return {
      // 暂存选择的用户数据信息
      fornowdata: {},
      // 用户数据信息列表
      userList: [],
      // 是否展示
      isShowUser: false,
    };
  },
  // 获取传递给子组件的属性
  props: ["chooseUser"],
  methods: {
    clickWho(t) {
      // 设置一个函数来判断点击了谁
      this.fornowdata = t;
      this.isShowUser = true;
    },
    pass() {
      // 用户通过审核
      let { username } = this.fornowdata;

      axios({
        method: "post",
        url: "https://qcljo8.api.cloudendpoint.cn/changeUserStatus",
        data: {
          name: username,
          code: "1",
        },
      }).then(
        (res) => {
          this.updateList();
          this.isShowUser = false;
        },
        (err) => {
          console.log(err.message);
        }
      );
    },
    refuse() {
      // 用户审核被拒绝
      let { username } = this.fornowdata;

      axios({
        method: "post",
        url: "https://qcljo8.api.cloudendpoint.cn/changeUserStatus",
        data: {
          name: username,
          code: "-1",
        },
      }).then(
        (res) => {
          this.updateList();
          this.isShowUser = false;
        },
        (err) => {
          console.log(err.message);
        }
      );
    },
    updateList() {
      // 设置公用更新列表的函数
      setTimeout(() => {
        axios.get("https://qcljo8.api.cloudendpoint.cn/judgeUser").then(
          (response) => {
            this.userList = response.data;
          },
          (error) => {
            console.log(error.message);
          }
        );
      }, 500);
    },
  },
  mounted() {
    // 在挂载完毕后请求数据
    axios.get("https://qcljo8.api.cloudendpoint.cn/judgeUser").then(
      (response) => {
        this.userList = response.data;
      },
      (error) => {
        console.log(error.message);
      }
    );
  },
  watch: {
    chooseUser: {
      // 通过监视chooseUser的值来进行一些展示与不展示的操作
      handler(newValue, oldValue) {
        if (newValue != oldValue) this.isShowUser = false;
      },
    },
  },
};
</script>

<style lang="less" scoped>
@bordercolor:rgb (170, 170, 170);
.topic_outer {
  height: 100%;
  color: white;
  .topic_left {
    width: 39.5%;
    height: 100%;
    float: left;
    .topic_left_list {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 7%;
      font-size: 20px;
      border: 1px solid rgb(170, 170, 170);
      border-top: 0px;
    }
    .inner {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      border: 1px solid rgb(170, 170, 170);
      border-top: 0px;
    }
    .size_small {
      font-size: 16px;
    }

    .first {
      border-top: 1px solid rgb(170, 170, 170);
    }
  }

  .topic_right {
    position: fixed;
    left: 48%;
    width: 48%;
    height: 80%;
    h1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .outer_out {
      height: 100%;
      width: 100%;
      padding-top: 20%;
      .outer {
        height: 10%;
        width: 100%;
        .info_title {
          width: 50%;
          height: 100%;
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .info {
          width: 49%;
          height: 100%;
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 50px;
            height: 50px;
            vertical-align: center;
          }
        }
      }
    }

    .btn {
      width: 30%;
    }
  }
}
</style>